<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>检测目录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/inspection/common.css" />
		<link rel="stylesheet" href="../../../css/inspection/itemDetail.css" />
		<link rel="stylesheet" href="../../../css/inspection/iconfont.css" />
	</head>
	<body>
		<!--logo-->
		<!--<div class="logoBox">
			<img src="img"/>
		</div>-->
		<!--页面主体信息-->
		<section>
			<div id="container">
				<!--导航-->
				<ul class="navBtn">
					<li><a class="control-item" :class="state=='ml'?'active':''" href="#" id="ml">检验目录</a></li>
					<li><a class="control-item" :class="state=='js'?'active':''" href="#" id="js">项目检索</a></li>
					<li><a class="control-item" :class="state=='cj'?'active':''" href="#" id="cj">样品采集</a></li>
				</ul>
				<!--搜索框-->
				<div class="searchBox">
					<span class="mui-icon mui-icon-search"></span>
					<input @click="jumpSearch" type="text" placeholder="促甲状腺激素"/>
				</div>
				<!--折叠面板-->
				<div class="listDetail">
					<!--检验目录-->
					<ul class="itemBox" v-if="state=='ml'">
						<!--第一行内分泌-->
				        <li class="mui-table-view-cell mui-collapse" v-for="msg in message">
				            <a class="mui-navigate-right" href="#" @tap="clickA(msg.id,msg.name,$event)">
				            	<span class="listIcon">
				            		<i class="icon iconfont icon-tubiaozhizuomoban1"></i>
				            	</span>
				            	<div class="borderRight"></div>
				            	<span>{{msg.name}}</span>
				            </a>
				            <!--二级列表-->
				            <div class="mui-collapse-content listDetailContent" v-for="item in msg.subs">
				            	<a href="#" class="listDetail" @click="clickB(item.id,item.name,$event)">
					            	<span class="listIcon mui-pull-left">.</span>
					            	<!--引导线和小圆点图标-->
					            	<div class="borderItemRight">
					            		<div class="guideLine"></div>
					            	</div>
					            	<!--引导线和小圆点图标,结束-->
					                <span class="mui-navigate-right listItem1">{{item.name}}</span>
				                </a>
				                <!-- 三级列表 -->
                                <ul class="listSonBox" style="display: none;" v-if="item.subs!=null?true:false">
                                    <li class="listSon" v-for="p in item.subs" @tap="clickS(p.id,p.name)">
                                        <a class="mui-navigate-right" href="#">
                                            <span class="listIcon">.</span>
                                            <div class="borderRight"></div>
                                            <div class="guidCircleBlack"></div>
                                            <span class="listSonTitle">{{p.name}}</span>
				                        </a>
                                    </li>
                                </ul>
				            </div>
				        </li>
					</ul>
					<!--项目检索-->
					<div class="gridBox" v-if="state=='js'">
						<div class="mui-row" v-for="(item,i) in itemDetail">
							<div @tap="jumpTestDetail(item.id,item.name)" class="mui-col-xs-10">{{item.name}}</div>
						</div>
					</div>
					<!--样品采集-->
					<ul class="itemBox" v-if="state=='cj'">
						<!--第一行血液标本采集-->
				        <li class="mui-table-view-cell mui-collapse" v-for="sample in itemSample">
				            <a class="mui-navigate-right" href="#">
				            	<span class="listIcon listIconLast">
				            		<i class="icon iconfont icon-tubiaozhizuomoban4"></i>
				            	</span>
				            	<div class="borderRight"></div>
				            	<span>{{sample.catname}}</span>
				            </a>
				            <!--二级列表-->
				            <div  @click="jumpCollectionDetail(samp.id,samp.title)" class="mui-collapse-content listDetailContent" v-for="samp in sample.subs">
				            	<a href="#" class="listDetail">
					            	<span class="listIcon mui-pull-left">.</span>
					            	<!--引导线和小圆点图标-->
					            	<div class="borderItemRight">
					            		<div class="guideLine"></div>
					            	</div>
					            	<!--引导线和小圆点图标,结束-->
					                <span class="mui-navigate-right listItem1">{{samp.title}}</span>
					            </a>
				            </div>				            
				        </li>
					</ul>
				</div>
			</div>
		</section>
		<!--页面底部信息-->
		<!--<footer>
			<div class="address">
				<img src="img/logo2.png" alt="" />
				<p>地址：中国(杭州)人工智能小镇3号楼6楼</p>
				<p>客服热线：400 878 6528</p>
			</div>
		</footer>-->
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#container',
				data:{
					url1:AT.baseUrl+'/clinic-doctor/',
					url2:'https://lab.ulabcare.com/clinicalmall-web/',
					message:{},
					itemDetail:{},
					itemSample:{},
					state:'ml'
				},
				mounted(){
					this.loadMessage(this.url1,this.url2);
					this.muiInit(this.url);
				},
				methods:{
					loadMessage:function(url1,url2){
						let _this=this;
						let stateS = localStorage.getItem('stateS');
						if(stateS){
							_this.state = stateS;
						}
						//检验目录
						mui.ajax(url1+'jyzsApp/selectrelationship',{
							dataType:'json',//服务器返回json格式数据
							type:'post',//HTTP请求类型
							headers:{'Content-Type':'application/json','token':localStorage.getItem(localStorage.getItem("state")+"_sale_token")},
							success:function(res){
								//服务器返回响应，根据响应结果，分析；
//								 console.log(res.data);
								if(res.code===0){
									_this.message=res.data;
								}
							},
							error:function(xhr,type,errorThrown){
								//异常处理；
								console.log(type);
							}
						});
						//项目检索
						mui.ajax(url1+'jyzsApp/select',{
							dataType:'json',
							type:'post',
							headers:{'Content-Type':'application/json','token':localStorage.getItem(localStorage.getItem("state")+"_sale_token")},
							success:function(res){
								 //console.log(res);
								if(res.code==0){
									_this.itemDetail=res.data;
//									console.log(_this.itemDetail);
								}
							},
							error:function(xhr,type,errorThrown){
								console.log(type);
							}
						});
						//样品采集
						mui.ajax(url2+'jyzsApp/selectYxcategory',{
							dataType:'json',
							type:'post',
							success:function(res){
								 //console.log(res);
								if(res.code==0){
									_this.itemSample=res.data;
								}
							},
							error:function(xhr,type,errorThrown){
								console.log(type);
							}
						});
					},
					//导航
					muiInit:function(url){
						let _this=this;
						mui('.navBtn').on('tap','a',function(){
							let id=this.getAttribute('id');
							_this.state=id;
							console.log(_this.state);
						})
					},
					//检查一级目录是否有子菜单
					clickA:function(id,title,e){
						let _this=this;
						let a=e.currentTarget;
						if(!a.nextElementSibling){
							let t= encodeURI(encodeURI(title));
							let s=_this.state;
							localStorage.setItem('stateS',s);
							location.href="thyroidTest.html?id="+id+'&title='+t;
						}
					},
					//检查目录三级子菜单折叠
					clickB:function(id,title,e){
						let _this=this;
						let a=e.currentTarget;
						//存在三级子目录的打开三级目录
						if(a.nextElementSibling){
							let ul=a.nextElementSibling;
							if(ul.style.display=='none'){
								ul.style.display='block';
							}else{
								ul.style.display='none';
							}
						}else{
							//console.log(id);
							//不存在跳转到页面
							let t= encodeURI(encodeURI(title));
							let s=_this.state;
							localStorage.setItem('stateS',s);
							location.href="thyroidTest.html?id="+id+'&title='+t;
						}
					},
					//三级子列表点击跳转
					clickS:function(id,title){
						let _this=this;
						let t= encodeURI(encodeURI(title));
						let s=_this.state;
						localStorage.setItem('stateS',s);
						location.href="thyroidTest.html?id="+id+'&title='+t;
					},
					//跳转到搜索页面
					jumpSearch:function(){
						let _this=this;
						let s=_this.state;
						localStorage.setItem('stateS',s);
						location.href="search.html";
					},
					//跳转到检测详情
					jumpTestDetail:function(id,title){
						let _this=this;
						let t= encodeURI(encodeURI(title));
						let s=_this.state;
						localStorage.setItem('stateS',s);
						location.href="testDetail.html?id="+id+'&title='+t;
					},
					//跳转到采集详情页
					jumpCollectionDetail:function(id,title){
						let _this=this;
						let t = encodeURI(encodeURI(title));
						let s=_this.state;
						localStorage.setItem('stateS',s);
						location.href="collectionDetail.html?id="+id+'&title='+t;
					}
				}
			})
		</script>
		
	</body>
</html>